---
image: /generated/articles-docs-use-delay-render.png
id: use-delay-render
title: useDelayRender()
sidebar_label: useDelayRender()
crumb: 'API'
---

# useDelayRender()<AvailableFrom v="4.0.342" />

A React hook that provides scoped `delayRender()`, `continueRender()` and `cancelRender()` (from v4.0.374) functions for React components.

This is the recommended approach instead of using the global [`delayRender()`](/docs/delay-render), [`continueRender()`](/docs/continue-render) and [`cancelRender()`](/docs/cancel-render) functions directly.

```tsx twoslash title="✅ Preferred - use useDelayRender()" {4}
import {useDelayRender} from 'remotion';

const MyComp: React.FC = () => {
  const {delayRender, continueRender, cancelRender} = useDelayRender();

  return <div>My component</div>;
};
```

```tsx twoslash title="⚠️ Discouraged - global APIs"
import {useDelayRender, continueRender, delayRender} from 'remotion';
```

## Why use `useDelayRender()` over global `delayRender()`?

With this hook, we can scope the delays to a specific render.  
This makes it future-proof for [browser rendering](/docs/miscellaneous/render-in-browser).<br /> It is recommended to use this hook instead of the global `delayRender()` function.

## See also

- [`delayRender()`](/docs/delay-render) - The underlying API
- [`continueRender()`](/docs/continue-render) - Manual render continuation
- [`cancelRender()`](/docs/cancel-render) - Cancel render on error
- [Data fetching guide](/docs/data-fetching)
